import { PageContainer } from '@ant-design/pro-layout';
import { Col, Row, Space } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { XoProTable } from '@/components/XoProTable';
import type { ProColumns } from '@ant-design/pro-table';
import type { Situation } from '@/models/situation';
import { playGameChessList } from '@/services/situation';
import { infoByActivityIdAndUid } from '@/services/student';
import { history } from 'umi';
import { baseUrl } from '../../../config/httpUrl';

export default function PlayChess() {
  // 用户id
  const { id, courseId } = history.location.query || {};

  const [dataInfo, setDataInfo] = useState<any>();

  useEffect(() => {
    (async () => {
      const res = await infoByActivityIdAndUid({
        uid: id,
        activityId: courseId,
      });
      setDataInfo(res.result);
    })();
  }, []);
  const columns: ProColumns<Situation>[] = [
    {
      dataIndex: 'id',
      title: '棋谱ID',
    },
    {
      dataIndex: 'startTime',
      title: '开始时间',
      search: false,
    },
    {
      dataIndex: 'endTime',
      title: '结束时间',
      search: false,
    },
    {
      dataIndex: 'gameTime',
      title: '对弈用时',
      search: false,
    },
    {
      dataIndex: 'gradeName',
      title: '棋士品级',
      search: false,
    },
    {
      dataIndex: 'currentScore',
      title: '当前积分',
      search: false,
    },
    {
      dataIndex: 'playScore',
      title: '获得分数',
      search: false,
    },
    {
      dataIndex: 'userColor',
      title: '执子',
      search: false,
      valueEnum: {
        1: { text: '执黑' },
        2: { text: '执白' },
      },
    },
    {
      dataIndex: 'steps',
      title: '手数',
      search: false,
    },
    {
      dataIndex: 'aiWin',
      title: '对弈结果',
      valueEnum: {
        0: { text: '全部' },
        1: { text: '负' },
        2: { text: '胜' },
        3: { text: '平局' },
      },
    },
    {
      dataIndex: 'failureType',
      title: '对弈备注',
      search: false,
      valueEnum: {
        0: { text: '-' },
        1: { text: '认输' },
        2: { text: '退出对弈' },
        3: { text: '超时判负' },
      },
    },
    {
      dataIndex: 'reviewStatus',
      title: '复盘状态',
      // search: false,
      valueEnum: {
        // UNAPPLY: { text: '未申请' },
        UNDO: { text: '待复盘' },
        DOING: { text: '复盘中' },
        DONE: { text: '已复盘' },
      },
    },
    {
      dataIndex: 'option',
      title: '操作',
      search: false,
      fixed: 'right',
      render: (_, records) => {
        if (records.reviewStatus == 2) {
          return (
            // record.id 棋谱id
            <>
              <div>
                <a
                  href={`/?scene=gameHistory&gameId=${records.id}&isTeacher=1`}
                  target="_blank"
                  rel="noreferrer"
                >
                  查看棋谱
                </a>
              </div>
              {/* <div>
                <a target="_blank" href={`${baseUrl.webview}/game_review_s?reviewId=${records.id}`} rel="noreferrer">
                  查看复盘
                </a>
              </div> */}
            </>
          );
        } else {
          return (
            <div>
              <a
                href={`/?scene=gameHistory&gameId=${records.id}&isTeacher=1`}
                target="_blank"
                rel="noreferrer"
              >
                查看棋谱
              </a>
            </div>
          );
        }
      },
    },
  ];

  return (
    <PageContainer
      className={styles.info_container}
      header={{
        title: '',
        breadcrumb: {},
      }}
      content={
        <Row className={styles.row}>
          <Col span={8} className={styles.row_item}>
            <Col>
              <Space>
                <span>用户ID:</span>
                <span>{dataInfo?.uid ? dataInfo.uid : '-'} </span>
              </Space>
            </Col>
            <Col>
              <Space>
                <span>手机号:</span>
                <span>{dataInfo?.phone ? dataInfo.phone : '-'} </span>
              </Space>
            </Col>
          </Col>
          <Col span={8} className={styles.row_item}>
            <Col>
              <Space>
                <span>用户昵称:</span>
                <span>{dataInfo?.nickname ? dataInfo.nickname : '-'}</span>
              </Space>
            </Col>
            <Col>
              <Space>
                <span>棋士品级/分数:</span>
                <span>
                  {dataInfo?.playGradeName || dataInfo?.playScore
                    ? `${dataInfo.playGradeName || '-'}/${dataInfo.playScore || '-'}`
                    : '-'}
                </span>
              </Space>
            </Col>
          </Col>
          <Col span={8} className={styles.row_item}>
            <Col>
              <Space>
                <span>真实姓名:</span>
                <span>{dataInfo?.realName ? dataInfo.realName : '-'}</span>
              </Space>
            </Col>
            <Col>
              <Space>
                <span>胜/总（胜率）:</span>
                {/* <span>{dataInfo?.completeItemCount&&dataInfo.totalItemCount?`${dataInfo.completeItemCount}/${dataInfo.totalItemCount}(${(dataInfo.completeItemCount/dataInfo.totalItemCount)*100}%)`:'-'}</span> */}
                <span>
                  {dataInfo?.playGameCount
                    ? `${dataInfo?.playGameCount?.allWinCount}/${dataInfo?.playGameCount?.allCount}`
                    : '-'}
                </span>
              </Space>
            </Col>
          </Col>
        </Row>
      }
    >
      <XoProTable
        request={async (params) => {
          const body = (await playGameChessList({ ...params, uid: Number(id) }))?.result;
          return {
            data: body?.records,
            total: body?.total,
          };
        }}
        options={false}
        rowKey="key"
        scroll={{ x: 1800 }}
        hasIndex={false}
        columns={columns}
      />
    </PageContainer>
  );
}
